<template>
  <div style="height:100%;">
    <header class="mui-bar mui-bar-nav bg-color" >
      <!--返回按钮-->
      <span class=" iconfont icon-fanhui header_fanhui" @tap="switchPaymentStatus"></span>
      <!--标题-->
      <h1 class="mui-title" >支付方式</h1>
    </header>
    <!-- 支付方式 -->
    <div class="mui-col mui-col-xs-12" style="position: relative;top:44px;"  v-show="paymentWay">
      <form class="mui-input-group">
        <div class="mui-input-row mui-radio mui-left" @tap="handlePaymentChoiceWay('alipay')">
          <label><img class="ali" src="static/img/ali.png" /><span>支付宝</span></label>
          <input name="radio" value="Item 1" type="radio">
        </div>
        <div class="mui-input-row mui-radio mui-left" style="border-top: 1px solid #f0f0f0!important;" @tap="handlePaymentChoiceWay('wxpay')">
          <label><img class="wx" src="static/img/wx.png" /><span>微信支付</span></label>
          <input name="radio" value="Item 2" type="radio">
        </div>
			</form>
    </div>
    <button  type="button" class="bt mui-btn mui-btn-primary" v-show="paymentWay" @click.stop="handlePay(paymentChoiceWay)">确认</button>
    <!-- 支付成功 -->
    <div class="success" v-show="paymentSuccess">
      <div class="text">
        <div class="icon-dui-01">
        </div>
        <div class="successText">
          支付成功
        </div>
      </div>
      <div class="payment-way">
          支付方式：{{wayName(paymentChoiceWay)}}支付
      </div>
      <div  class="functionButton">、
        <li style="margin-right:10%" @tap="goHome">返回首页
        </li>
        <li style="margin-left:10%" @tap="goOrder">查看订单
        </li>
      </div>
    </div>
    <!-- 支付失败 -->
    <div class="fail" v-show="paymentFail">
      <div class="text">
          <div class="icon-jia"></div>支付失败
      </div>
      <div  class="remark">
          *原因可能是您的余额不足，请更换支付方式
      </div>
    </div>
  </div>
</template>
<script>
import { Checklist } from 'mint-ui'
import mui from 'static/js/mui'
import { crowdOrder, aliPay, wxPay } from '@/api/payment'
export default {
  data() {
    return {
      wxChannel: null,// 微信支付
      aliChannel: null,// 支付宝支付
      channel: null, // 支付通道
      paymentWay:true,
      paymentSuccess: false,
      paymentFail: false,
      paymentLock: false,
      paymentChoiceWay: null,
    };
  },
  props: {
    // 父组件传状态
    paymentStatus: {
      type: Boolean,
      default: true
    },
    // 操作哪个商品
    crowdData: {
      type: Object
    }
  },
  watch: {},
  methods: {
    goHome() {
      this.$router.push({
        path: "/home",
      })
    },
    goOrder() {
      this.$router.push({
        name:"crowdOrder",
      })
    },
    switchPaymentStatus() {
      this.$router.push({
        name:"crowdOrder",
      })
      /* let that = this;
      mui.confirm("亲，确定要退出支付吗？","",["继续支付","确认离开"], function (e) {
          if (e.index == 1) {     //索引是1的就是选择的是
            that.$router.push({
              name:"crowdOrder",
            })
          } else {
              //console.log('')
          }
      }) */
    },
    handlePaymentChoiceWay(data){
      this.paymentChoiceWay = data
    },
    // app写法，h5写法需要另做兼容
    handlePay(id){
      // 从服务器请求支付订单  
      if(id == null) {
        return
      }
      //支付锁，ajax没有请求成功回调前锁住按钮不让再次触发支付
      if(this.paymentLock){
        return 
      }
      this.paymentLock = true
      if(id == 'alipay') {
        var payChanel = this.aliChannel
        let that = this
        crowdOrder(this.crowdData).then(response =>{
          aliPay(response.data).then(response => {
            //这里要自己封装
            //console.log(response.data)
            //let data = response.data.replace(/(^\s*)|(\s*$)/g, "")  
            plus.payment.request(payChanel,response.data, function(result) {
                //console.log(result)
                //console.log(JSON.stringify(result));
                 // 关闭支付锁
                that.paymentLock = false
                that.paymentWay = !that.paymentWay
                that.paymentSuccess = !that.paymentSuccess
            }, function(e) {
                //console.log(JSON.stringify(e));
                that.paymentWay = !that.paymentWay
                that.paymentFail = !that.paymentFail
            });
          })
        })
      }else if(id == 'wxpay'){
        var payChanel = this.wxChannel
        let that = this
        crowdOrder(this.crowdData).then(response =>{
          //微信支付api方法
          wxPay(response.data).then(response =>{
            ////console.log(response)
            if(response.msg === 'success'){
              //这里要自己封装
              //console.log(response.data)
              plus.payment.request(payChanel, response.data, function(result) {
                  //console.log(JSON.stringify(result));
                  // 关闭支付锁
                  that.paymentLock = false
                  that.paymentWay = !that.paymentWay
                  that.paymentSuccess = !that.paymentSuccess
              }, function(e) {
                  //console.log(JSON.stringify(e));
                  that.paymentWay = !that.paymentWay
                  that.paymentFail = !that.paymentFail
              });
            }else{
              this.paymentWay = !this.paymentWay
              this.paymentFail = !this.paymentFail
            }
          })
        })
        ////console.log(payChanel)
      }else {
        plus.nativeUI.alert("不支持此支付通道！",null,"捐赠");  
        return;  
      } 
    },
    wayName(ChoiceWay){
      if(ChoiceWay == 'wxpay'){
        return '微信'
      }
      if(ChoiceWay == 'alipay'){
        return '支付宝'
      }
    }
  },
  components:{Checklist},
  filters: {},
  computed: {},
  created() {
  },
  mounted() {
    mui.init()
    if(window.plus){
      // 获取支付通道
      let that = this
      plus.payment.getChannels(function(channels) {
        ////console.log(channels)
        for(var i in channels) {
          if(channels[i].id == "wxpay") {
            that.wxChannel = channels[i]
            ////console.log(that.wxChannel)
          }else{
            that.aliChannel = channels[i]
          }
        }
      },function(e) {
        alert("获取支付通道失败:"+e.message)
      })
    }
  }
};
</script>
<style scoped>
html, body{
  height:100%;
}
.bt{
  position: absolute;
  bottom:20px;
  left: 5%;
  width: 90%;
  height:40px;
}

.mui-btn-primary:active {
   background-color: #ff6a27;
   border: 1px solid #ff6a27;
}
.mui-input-row {
  height:50px;
  line-height:50px;
}
.mui-radio input[type=radio] {
    position: absolute;
    top: 4px;
    right: 20px;
    display: inline-block;
    width: 28px;
    height: 26px;
    border: 0;
    outline: 0!important;
    background-color: transparent;
    -webkit-appearance: none;
}

.mui-radio input[type=radio] {
    position: absolute;
    top: 4px;
    right: 20px;
    display: inline-block;
    width: 28px;
    height: 26px;
    border: 0;
    outline: 0!important;
    background-color: transparent;
    -webkit-appearance: none;
    margin-top:7px;
}

.mui-radio input[type='radio']:before{
    font-family: Muiicons;
    font-size: 28px;
    font-weight: normal;
    line-height: 1;
    text-decoration: none;
    color: #aaa;
    border-radius: 0;
    background: none;
    -webkit-font-smoothing: antialiased;
}
.mui-radio input[type='radio']:checked:before {
    content: '\e442';
}

.mui-radio input[type='radio']:checked:before{
    color: #ff6a27;
}

.mui-radio input[type='radio']:before{
    font-family: Muiicons;
    font-size: 28px;
    font-weight: normal;
    line-height: 1;
    text-decoration: none;
    color: #aaa;
    border-radius: 0;
    background: none;
    -webkit-font-smoothing: antialiased;
}

.mui-input-group:before {
    background-color: transparent;
}
.mui-input-group .mui-input-row:after {   
    background-color: transparent;
}
.mui-input-group:after {
    background-color: transparent;
}
.mui-input-row label {
  padding:17px 15px;
  padding-left: 58px;
}
.mui-input-row span {
  position: relative;
  top:2px;
  margin-left:45px;
}
.ali {
  height:35px;
  position: absolute;
  margin-top:-9px;
}
.wx {
  height:35px;
  position: absolute;
  margin-top:-8px;
}
/* 头部 */
header{
  background: #fff!important;
}
.header_fanhui{
  height:43px;
  line-height:43px;
  font-size: 18px;
  color:#666666;
  width: 43px;
}
.mui-bar-nav{
 box-shadow: 0 0px 0px;
 border-bottom:1px solid #e9e9e9;
}
.mui-input-row label {
    font-size: 13px;
}
/* 成功样式 */
.success {
  margin-top:44px;
  height:30%;
  background: #fff!important;
}
.success .text{
  padding-top:5%;
  color: #ff6a27;
  text-align: center;
  font-size:22px;
}
.success .payment-way{
  padding-top:5%;
  text-align: center;
  font-size:16px;
}
.success .functionButton{
  padding-top:5%;
   text-align: center;
   margin-left:24%;

}
.success .functionButton li{
    float: left;
    width: 25%;
    height:30px;
    line-height:30px;
    border: 1px solid #999999;
    color:#333333;
}
li {
    list-style: none;
}
.icon-dui-01 {
  font-size:23px;
  display: inline-block;
  position: relative;
  top:1px;
}
.successText{
  display: inline-block;
}
/* 失败样式 */
.fail {
  margin-top:44px;
  height:30%;
  background: #fff!important;
}
.fail .text{
  padding-top:5%;
  color: #ff6a27;
  text-align: center;
  font-size:22px;
}
.fail .remark{
  padding-top:5%;
  text-align: center;
}
.icon-jia{
  transform: rotate(45deg);
  display:inline-block;
  margin-right:5px;
  position: relative;
  top:1px;
}
</style>